<template>
  <div>
     <headerMiddle title="我的跟帖"/>
     <div class="item" v-for="(item,index) of commentList" :key="index">
         <div class="date">2019-10-10 10:25</div>
         <div class="parent" v-if="item.parent">
             <div class="name">回复：{{item.parent.user.nickname}}</div>
             <div class="parentContent">{{item.parent.content}}</div>
         </div>
         <div class="mainContent">{{item.content}}</div>
         <div class="postOrigin">
                原文: {{item.post.title}}
        </div>
     </div>
  </div>
</template>

<script>
import headerMiddle from '@/components/headerMiddle'
export default {
    components:{
        headerMiddle
    },
    data(){
        return {
            commentList: []
        }
    },
    mounted(){
        this.$axios({
            url: '/user_comments',
            method: 'get',
        }).then(res=>{
            this.commentList = res.data.data;
            console.log(res);
        })
    }

}
</script>

<style scoped lang="less">
    .item{
        font-size: 3.889vw;
        padding: 5.556vw;
        border-bottom: 1px solid #eee;
    }
    .date{
        font-size: 3.333vw;
        color: #b0b0b0;
    }
    .parent{
        padding: 5.556vw;
        background-color: #e4e4e4;
        margin-top: 2.778vw;
        color: #888;
        .parentContent{
            margin-top: 2.778vw
        }
    }
    .mainContent{
        margin-top: 2.778vw
    }
    .postOrigin{
        margin-top: 2.778vw;
        color: #888;
    }

    

</style>